<template>
  <div class="container">
    <!-- 预览 -->
    <el-card v-if="isPreview" body-style="padding:0px 16px 20px">
      <div slot="header">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col>
            <span style="font-weight: 700"
              >试卷名称：{{ list.paper_name }}</span
            >
          </el-col>
          <el-col>
            <el-row type="flex" justify="end">
              <el-button
                type="primary"
                plain
                size="small"
                @click="isPreview = false"
                >返回列表</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </div>
      <PagePreview :preview-list="list" />
    </el-card>
    <!-- 新增 -->
    <el-card v-else-if="isAdd" body-style="padding:0px 16px 20px">
      <div slot="header">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col>
            <span style="font-weight: 700">{{
              editList.subject_id ? "修改试卷" : "新增试卷"
            }}</span>
          </el-col>
          <el-col>
            <el-row type="flex" justify="end">
              <el-button type="primary" plain size="small" @click="backList"
                >返回列表</el-button
              >
            </el-row>
          </el-col>
        </el-row>
      </div>
      <addExam ref="edit-page" :edit-list="editList" />
    </el-card>
    <el-card v-else body-style="padding:0px 16px">
      <el-row type="flex" justify="end">
        <el-button
          type="primary"
          plain
          style="margin: 16px"
          size="small"
          @click="isAdd = true"
          >创建考试</el-button
        >
      </el-row>
      <PageList @show="PaperPreviewPage" @edit="editPageFn" />
    </el-card>
    <!-- --------------------------------------------------------------------------------------- -->
  </div>
</template>

<script>
import PageList from "./components/pageList.vue";
import addExam from "./components/addExam.vue";
import PagePreview from "./components/PagePreview.vue";
export default {
  name: "",
  components: { PageList, addExam, PagePreview },
  props: {},
  data() {
    return {
      isAdd: false,
      isPreview: false,
      list: [],
      editList: [],
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    PaperPreviewPage(val) {
      this.isPreview = true;
      this.list = val;
      console.log(this.list);
    },
    editPageFn(val) {
      this.isAdd = true;
      this.editList = val;
      console.log(val);
      // 数据渲染异步的,此时还获取不到
      this.$nextTick(() => {
        this.$refs["edit-page"].editPage();
        console.log(this.$refs["edit-page"]);
      });
    },
    backList() {
      this.isAdd = false;
      this.editList = [];
    },
  },
};
</script>

<style scoped lang="scss">
.paper-list {
  width: 100%;
  height: 100%;
}
.paper-filter {
  background-color: #fff;
  padding: 16px;
}
.el-date-editor--daterange {
  width: 200px;
}
.table-bg {
  padding: 16px;
}
</style>
